<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="../CSS/test1.css">
     
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-inverse" style="margin-bottom: 0;">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              
              <li><a href="#">小说管理系统</a></li>
            </ul>
            
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">${user.username}</a></li>
              <li class="dropdown">
                <a href="#">退出<span></span></a>
              </li>
            </ul>
          </div>
      </nav>

        <!-- 侧边栏 -->
      <nav class="menu">
        <div class="actionsBar">
            <div>
                <button id="menuBtn" type="button">
                    <i class="iconfont icon-hanbaocaidan"></i>
                </button>
                <h3 class="menuText">admin</h3>
            </div>
        </div>
        <ul class="optionsBar">
            <li class="menuItem">
                <a href="#" class="menuOption">
                    <i class="iconfont icon-shouye"></i>
                    <h5 class="menuText">用户列表</h5>
                </a>
            </li>
            <!-- <li class="menuBreak">
                <hr>
            </li> -->
            <li class="menuItem">
                <button class="menuOption" type="button">
                    <i class="iconfont icon-tupian"></i>
                    <h5 class="menuText">小说类型</h5>
                </button>
            </li>

            <li class="menuItem">
                <button class="menuOption" type="button">
                    <i class="iconfont icon-tupian"></i>
                    <h5 class="menuText">小说管理</h5>
                </button>
            </li>
        </ul>
        <div class="about" id="about"></div>
        <div class="menuUser">
            <a href="#">
                <div>
                    <img src="./goat.jpg" alt="">
                </div>
                <h5 class="Username menuText">${user.username}</h5>
                <p class="menuText">
                    <i class="iconfont icon-youjiantou"></i>
                </p>
            </a>
        </div>
        <div class="themeBar">
            <div>
                <button type="button">
                    <i class="iconfont icon-tuichu"></i>
                </button>
            </div>
        </div>
    </nav>

    <div class="content">
        <div class="table-container">
            <table class="table"> <!-- 注意这里的类名是 "table" 而不是 "table-container" -->
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 使用JSP的c:forEach循环来动态生成表格行 -->
                    <c:forEach var="item" items="${dataList}">
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.description}</td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>


    <script>
        const menuBtn = document.getElementById('menuBtn');
        const menu = document.querySelector('.menu');
        const menuText = document.querySelectorAll('.menuText');
        menuBtn.addEventListener('click', () => {
            menu.classList.toggle('open');
            menuText.forEach(function (text, index) {
                setTimeout(() => {
                    text.classList.toggle('open2');
                }, index * 50);
            });
            document.querySelector('.content').classList.toggle('collapsed');
        });
        document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.content').classList.add('collapsed');
});
    </script>
</body>
</html>